<template>
  <div class="index-container">
    <div class="mar-t-26 mar-l-20">
      <form-info @handleSearch="formHandSearch" />
    </div>
    <div class="pad-20">
      <state-btn-group @handleSearch="stateHandSearch" />
    </div>
    <div class="pad-l-20 pad-r-20 pad-b-20" v-loading="loading" element-loading-text="加载中" element-loading-background="#f5f5f5">
      <list-info :dataList="dataList"/>
    </div>
    <div class="flex flex-center mar-t-30" v-if="dataList.length > 0">
      <page-number :total="total" :pageSize="queryParams.size" @handleSearch="pageHandSearch"/>
    </div>
  </div>
</template>

<script lang="ts">
import FormInfo from "./components/FormInfo/index.vue"
import StateBtnGroup from "./components/StateBtnGroup/index.vue"
import ListInfo from "./components/ListInfo/index.vue"
import { defineComponent, onMounted, ref } from "vue"
import { getOrderListPage } from '@/api/order/order'
import noneData from '@/components/noneData/index.vue'
import PageNumber from "../../components/PageNumber/index.vue"

export default defineComponent({
  components: {
    FormInfo,
    StateBtnGroup,
    ListInfo,
    PageNumber
  },
  setup() {
    const dataList = ref(Object)
    const loading = ref(false)
    const total = ref(0)
    
    const queryParams = ref({
      currentPage: 1,
      size: 10,
      orderStatus: "",
      orderType: 37,
      // 售后状态：0否；1是
      afterSaleFlag: "",
      orderNo: "",
      startDate: "",
      endDate: ""
    })

    onMounted(() => {
      // 初始化方法
      init()
    })

    const init = () => {
      loading.value = true
      getOrderListPage(queryParams.value).then(response => {
        loading.value = false
        if (response.isError) return
        dataList.value = response.data.records
        total.value = response.data.total
      })
    }

    const formHandSearch = (form: object) => {
      queryParams.value.startDate = form.value.startDate
      queryParams.value.endDate = form.value.endDate
      queryParams.value.orderNo = form.value.orderNo
      queryParams.value.afterSaleFlag = form.value.afterSaleFlag
      queryParams.value.currentPage = 1
      init()
    }

    const stateHandSearch = (orderStatus: string) => {
      queryParams.value.orderStatus = orderStatus
      queryParams.value.currentPage = 1
      init()
    }

    const pageHandSearch = (pageNum: number) => {
      queryParams.value.currentPage = pageNum
      init()
    }

    return {
      formHandSearch,
      stateHandSearch,
      dataList,
      loading,
      noneData,
      queryParams,
      pageHandSearch,
      total
    }
  },
})
</script>

<style lang="scss" scoped>
.index-container {
  background: #fff
}
</style>
